<template>
  <div class="equipmentDetails">
    <div class="top">
      <div class="card">
        <van-image width="152" height="152" :src="detailData.photoPath">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
        <div class="datail">
          <p>设备名称：{{ detailData.name }}</p>
          <p>设备编号：{{ detailData.number }}</p>
          <p>安装位置：{{ detailData.installLocationName }}</p>
          <p class="multi_ellipsis2">设备用途：{{ detailData.purpose }}</p>
        </div>
      </div>
    </div>
    <div class="item_box">
      <div class="item" v-for="item in infoList" :key="item.id" :data="item">
        <span class="item_left">{{ item.name }}</span>
        <span class="item_right" v-if="item.key != 'deviceStateVOList'">{{
          detailData[item.key] || '-'
        }}</span>
        <span class="item_right" v-else>{{
          detailData.deviceStateVOList && detailData.deviceStateVOList.length > 0
            ? detailData.deviceStateVOList.map((v) => v.stateName).join(',')
            : '-'
        }}</span>
      </div>
    </div>
    <van-overlay :show="showOverlay" class-name="loading_overlay">
      <van-loading class="loading" type="spinner" color="#1989fa" />
    </van-overlay>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { showNotify } from 'vant';
import { getInfo } from '@/api/equipmentLedger.js';
const router = useRouter();
const route = useRoute();
const showOverlay = ref(false);
const detailData = ref({});
const infoList = [
  {
    val: '空压机',
    name: '设备类型',
  },
  {
    key: 'deviceStateVOList', //arr
    name: '设备状态',
  },
  {
    key: 'brand',
    name: '设备品牌',
  },
  {
    key: 'model',
    name: '规格型号',
  },
  {
    key: 'userName',
    name: '负责人',
  },
  {
    key: 'departmentName',
    name: '所属部门',
  },
  {
    key: 'price',
    name: '资产原值',
  },
  {
    key: 'supplierName',
    name: '供应商',
  },
  {
    key: 'operationTime',
    name: '搬运时间',
  },
];
// onBeforeMount(() => {
//   console.log(route.params);
//   if (!route.params.deviceId) {
//     console.log('缺少设备ID');
//     showNotify({ type: 'warning', message: '缺少设备ID' });
//     setTimeout(router.back(), 1000);
//   }
// });

onMounted(async () => {
  if (!route.params.deviceId) {
    showNotify({ type: 'warning', message: '缺少设备id' });
    return;
  }
  await getDetail(route.params.deviceId);
});

function getDetail(deviceId) {
  showOverlay.value = true;
  getInfo(deviceId)
    .then((res) => {
      if (res.code == 200) {
        detailData.value = res.data;
        console.log('res.data', res.data);
      }
    })
    .catch((err) => {
      showNotify({ type: 'warning', message: err.msg || '设备id异常' });
    })
    .finally(() => {
      showOverlay.value = false;
    });
}
</script>
<style scoped></style>
<style scoped lang="scss">
.equipmentDetails {
  position: relative;
  width: 100%;
  // height: calc(100vh - 110px);
  overflow-y: hidden;
  background: linear-gradient(141deg, #01a5fb 0%, #0076f7 100%);
  border-radius: 0px 0px 0px 0px;
  .top {
    padding: 24px;
    display: flex;
    justify-content: center;
    // box-sizing: border-box;
    .card {
      padding: 19px 9px;
      width: 100%;
      height: 192px;
      background: url('@/assets/images/detailBg.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      justify-content: space-between;
      gap: 0 10px;
      .datail {
        position: relative;
        top: 20px;
        width: 55%;
        float: right;
      }
    }
  }
  .item_box {
    width: 100%;
    height: 424px;
    background: #ffffff;
    border-radius: 15px 0px 0px 0px;
    padding: 0 16px;
    box-sizing: border-box;
    .item {
      width: 100%;
      display: flex;
      justify-content: space-between;
      height: 44px;
      line-height: 44px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #333333;
      border-bottom: 1px solid #e8e4e4;
    }
    .item_left {
    }
    .item_right {
      color: #666666;
    }
  }
}
</style>
